<template>
  <div class="com">
    <div  @tap="isShowPanel = true" class="ta-c">
      <span style="height: 34px;width: 36px;"><i class="if icon-fastreply" style="font-size: 21px;"></i></span>
      <div class="fs-xt">快捷回复</div>
    </div>
    <pop v-model="isShowPanel" :slotData="slotData">
      <div slot="header">
        <div class="pd ta-c c-gray fs-4">快捷回复</div>
      </div>
      <div class="ta-c">
        <div class="pd"
          v-for="(n, i) in slotData.words"
          :class="{'bd-b-light': i < slotData.wordLength - 1}"
          :key="i" @tap="onCheck(n)">{{n}}</div>
      </div>
    </pop>
  </div>
</template>

<script>
import Pop from '@/components/pop'

export default {
  props: {},
  components: {Pop},
  data() {
    return {
      isShowPanel: false,
      words: [
        '坚持练习，老师相信你一定会更优秀！',
        '继续加油，老师看到了你的进步，很棒！',
        'Excellent！今天的作业做得简直完美！',
        '一如既往，发音纯正，老师看好你哦！',
        '速度杠杠的，老师给你一个大大的赞！',
      ]
    }
  },
  computed: {
    slotData () {
      return {
        words: this.words,
        wordLength: this.words.length
      }
    }
  },
  methods: {
    onCheck (n) {
      this.$emit('success', n)
      this.isShowPanel = false
    }
  },
  watch: {
    isShowPanel (nv) {
      this.$store.commit('UI_SET_IS_MODEL', nv)
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
.com {
  position: relative;
}
i {
  font-size: 2 * @baseSize;
  position: relative;
  top: 3px;
}
.panel {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .6);
  &-inner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    font-size: 16px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  &-hd {
    padding: 20px;
    position: relative;
    .handle-close {
      position: absolute;
      height: 30px;
      width: 30px;
      line-height: 30px;
      right: 10px;
      top: 50%;
      margin-top: -20px;
    }
  }
  &-bd {
    >div {
      background-color: white;
      padding: 16px;
    }
  }
}
span {
  position: relative;
  top: 7px;
}
i {
  font-size: 24px;
}
</style>
